<template>
	<view class="order-item">
		<view class="commodity" @click="orderDetail">
			<view class="status">
				<!-- <text style="background: #999;border-radius: 50%;"> -->
					<uni-icons type="shop" color="#bfbfbf" size="20" style="margin-right: 5px;"></uni-icons>
				<!-- </text> -->
				{{dataSource.status_text}}
			</view>
			<view class="delivery">
				{{dataSource.create_time}}
			</view>
		</view>
		<view class="details" @click="orderDetail">
			<view class="details-l">
				<image :src="dataSource.pic" mode="widthFix"></image>						
			</view>
			<view class="details-r">
				<view class="title line2">
					{{dataSource.goods_title}}
				</view>
				<view class="skubar">
					<text class="sku">规格:{{dataSource.goods_skuname}}</text>
					<text class="price">￥{{dataSource.goods_payprice}}</text>							
				</view>
				<view class="othing">
					<text class="num">共{{dataSource.count}}件</text>
					<view class="price">
						实付
						<text>￥{{dataSource.total_payprice}}</text>								
					</view>
				</view>
			</view>
		</view>
		<view class="btn-group">
			<view class="btn" @click="orderDetail">
				查看详情
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"order-item",
		data() {
			return {
				
			};
		},
		props:{
			dataSource:{
				type: Object,
				default: null
			}
		},
		methods:{
			orderDetail(e){
				// this.$uniGo("navigateTo",{
				// 	url:"/pages/order/order-detail"+'?orderid=182610'
				// })
				this.$uniGo("navigateTo",{
					url:"/pages/order/order-detail?orderid=" + this.dataSource.id
				})				
				// uni.navigateTo({
				// 	url:"/pages/order/order-detail"+'?orderid=182610'
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-item{
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.commodity{
			height: 100rpx;
			margin: 0 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			.status{
				font-weight: bold;
				display: flex;
				align-items: center;
			}
		}
		.details{
			margin: 0 25rpx;
			padding: 30rpx 0;
			display: flex;
			border-bottom: 1rpx solid #e5e5e5;
			border-top: 1rpx solid #e5e5e5;
			.details-l{
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
			.details-r{
				flex: 1;
				margin-left: 22rpx;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				.skubar,.othing{
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
				}
				.othing{
					margin-top: 14rpx;
				}
				.sku,.num{
					color: $uni-text-color-grey;
				}
				.price{
					font-size: 28rpx;
					text{
						color: $theme-color;
						font-weight: bold;
					}
				} 
			}
		}
		.btn-group{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			padding: 0 20rpx;
			.btn{
				color: $theme-color;
				padding: 5rpx 10rpx;
				border: 1rpx $theme-color solid;
				border-radius: 100rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>